<script>
import { mapActions, mapWritableState } from 'pinia'
import { User, Lock } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/authStore.js'
import userRule from '@/rules/userRule.js'
import { login } from '@/api/authApi.js'
// import axios from 'axios'
export default {
  components: {
    User,
    Lock,
  },
  data() {
    return {
      user: {
        username: '',
        password: '',
        usertype: '1',
      },
      userRules: userRule,
      submitting: false,
      // userRules: {
      //   username: [
      //     { required: true, message: '登录名不能为空', trigger: 'blur' },
      //     { min: 2, message: '登录名至少两位', trigger: 'blur' },
      //   ],
      //   password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
      // },
    }
  },
  computed: {
    ...mapWritableState(useAuthStore, ['currentUser', 'menus', 'token']),
  },
  methods: {
    ...mapActions(useAuthStore, ['clearStore']),
    async doLogin() {
      this.submitting = true
      try {
        this.clearStore()
        // 1. 校验数据
        await this.$refs.loginForm.validate()
        // 2. 发送登录请求
        const data = await login(this.user)
        this.currentUser = data.user
        this.token = data.token
        this.$router.push({ name: 'home' })
      } catch (e) {
        // 错误提示已在拦截器中统一处理，这里兜底但不弹窗
        // 可选：console.warn(e)
      } finally {
        this.submitting = false
      }
    },
  },
}
</script>
<template>
  <div class="box">
    <!-- UI组件本身是带有样式的 -->
    <el-card>
      <template #header> 教务系统 </template>
      <el-form :model="user" :rules="userRules" ref="loginForm" size="small">
        <el-form-item prop="username">
          <el-input placeholder="学号/工号/用户名" size="small" v-model="user.username">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="登录密码"
            size="small"
            type="password"
            show-password
            v-model="user.password"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="user.usertype" size="small">
            <el-radio-button label="3">学生</el-radio-button>
            <el-radio-button label="2">教师</el-radio-button>
            <el-radio-button label="1">管理员</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" :loading="submitting" :disabled="submitting" @click="doLogin()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.box {
  height: 100%;
  width: 100%;
  background-image: url('@/assets/img/login-background.jpg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-card {
  width: 340px;
  padding: 10px 0 0 0;
}
/* .el-card :deep(.el-card__body) {
  color: red;
} */
.el-radio-group {
  width: 100%;
}
.el-radio-group :deep(.el-radio-button) {
  flex-grow: 1;
}
.el-radio-group :deep(.el-radio-button .el-radio-button__inner) {
  width: 100%;
}
.el-button {
  width: 100%;
}
.el-form-item :deep(.el-input__wrapper) {
  background-color: #fff !important;
  min-height: 30px !important;
  height: 30px !important;
  font-size: 14px;
}
</style>
